@use "../../assets/scss/mixins/base" as *;

body {
  background-color: #222;
}

$num-rings: 10;

.toy-container {
  @include middle(50vh, 80vh);
  perspective: 50vh;
  .lid {
    z-index: 2;
    @include abs(0, 0) {
      right: 0;
    }
    @include rect(unset, 5%, rgba(140, 20, 20, 1), 0.5vh);
    border-top-left-radius: 4vh 1vh;
    border-top-right-radius: 4vh 1vh;
    background-image: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.2) 0%,
      rgba(0, 0, 0, 0.1) 1%,
      rgba(255, 255, 255, 0.05) 3%,
      rgba(255, 255, 255, 0.2) 6%,
      rgba(255, 255, 255, 0.3) 8%,
      rgba(255, 255, 255, 0.5) 10%,
      rgba(255, 255, 255, 0.3) 13%,
      rgba(0, 0, 0, 0) 30%,
      rgba(0, 0, 0, 0.1) 80%,
      rgba(0, 0, 0, 0.8) 97%,
      rgba(0, 0, 0, 0.6) 100%
    );
    box-shadow: inset 0.1vh 0.2vh 0 rgba(255, 255, 255, 0.2),
      inset 0 -0.1vh 0 rgba(0, 0, 0, 0.25), 0 0.2vh 3vh rgba(0, 0, 0, 0.25);
    &::before {
      content: "";
      @include abs-tl(-2vh, 4vh);
      @include rect(10vh, 2vh, #ccc, 1vh 1vh 1vh 0);
      border-top-left-radius: 2vh 1vh;
      box-shadow: inset -1.2vh -0.3vh 1vh rgba(0, 0, 0, 0.6);
    }
  }
  .game {
    @include abs(3%, 2%) {
      right: 2%;
      bottom: 20%;
    }
    transform: rotateX(-5deg);
    transform-origin: 50% 0;
    .hills {
      @include abs(unset, 1vh) {
        bottom: 6vh;
        right: 1vh;
      }
      overflow: hidden;
      height: 10vh;
      @include pseudo-ba {
        height: 13vh;
        background: transparent;
      }
      &::before {
        top: 5vh;
        left: -4vh;
        width: 18vh;
        border-radius: 0.5vh;
        box-shadow: inset 0 1vh 0.2vh rgba(255, 255, 255, 0.3),
          1vh -0.5vh 0.2vh rgba(0, 0, 0, 0.2);
        transform: rotate(35deg);
      }
      &::after {
        top: 7vh;
        left: 18vh;
        width: 26vh;
        border-radius: 1.5vh;
        box-shadow: inset -0.5vh 1vh rgba(255, 255, 255, 0.3),
          0.5vh -0.5vh 0.2vh rgba(0, 0, 0, 0.2);
        transform: rotate(-14deg);
      }
    }
    .pegs {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 15vh;
      height: 30vh;
      .peg {
        position: absolute;
        @include rect(1.5vh, 10vh, rgba(255, 255, 255, 0.1), 0.5vh);
        background-image: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0),
          rgba(255, 255, 255, 0.1)
        );
        border-top-left-radius: 0.75vh 5vh;
        border-top-right-radius: 0.75vh 5vh;
        box-shadow: inset 0.1vh 0 0.1vh rgba(0, 0, 0, 0.3),
          inset -0.2vh 0 0.2vh rgba(255, 255, 255, 0.2);
        &:nth-child(1) {
          left: 20vh;
          bottom: 8vh;
        }
        &:nth-child(2) {
          right: 10vh;
          bottom: 15vh;
        }
        &::after {
          content: "";
          @include abs-bl(-2vh, 50%);
          transform: translateX(-50%);
          @include circle(4vh, rgba(255, 255, 255, 0.02));
          box-shadow: inset 0.4vh 0.4vh 0.1vh rgba(255, 255, 255, 0.05),
            inset -0.3vh -0.3vh 0.2vh rgba(255, 255, 255, 0.1),
            inset -0.5vh -0.5vh 0.3vh rgba(0, 0, 0, 0.2);
        }
      }
    }

    .rings {
      position: absolute;
      inset: 0;
      .ring {
        $bg: radial-gradient(
          circle 2.5vh at 50% 50%,
          rgba(0, 0, 0, 0) 50%,
          red 65%,
          red 80%,
          rgba(0, 0, 0, 0) 95%,
          rgba(0, 0, 0, 0) 100%
        );
        @include circle(5vh, $bg);
        @include abs-bl(4vh, 15vh);
        mask-image: radial-gradient(
            ellipse 0.8vh 2vh at 50% 1vh,
            transparent 90%,
            #000
          ),
          linear-gradient(0deg, #000, #000);
        mask-position: 0 -3vh, 0 0;
        mask-repeat: no-repeat;
        animation-duration: 7s;
        animation-iteration-count: 1;
        animation-timing-function: linear;
        animation-fill-mode: both;
        @for $i from 1 through $num-rings {
          $animation-delay: random(1500) + 200;
          &:nth-child(#{$i}) {
            animation-delay: #{$animation-delay}ms;
            animation-name: ring-#{$i};
          }
        }
      }
    }
    .glass {
      z-index: 1;
      position: absolute;
      inset: 0;
      background-color: rgba(100, 100, 255, 0.05);
      box-shadow: inset 0.25vh -2vh 4vh rgba(255, 255, 255, 0.5),
        inset 0 0 0.5vh rgba(255, 255, 255, 0.5);
    }
  }
  .base {
    z-index: 2;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    @include rect(unset, 22vh, rgba(140, 20, 20, 1), 0.5vh);
    background-image: radial-gradient(
      ellipse 30vh 3vh at -2vh 50%,
      rgba(255, 255, 255, 0.4),
      rgba(255, 255, 255, 0)
    );
    box-shadow: inset 0.1vh 0.2vh 0 rgba(255, 255, 255, 0.5),
      inset 0 -0.1vh 0 rgba(0, 0, 0, 0.25), 0 -0.2vh 3vh rgba(0, 0, 0, 0.25);
    transform: rotateX(5deg);
    transform-origin: 50% 0;
    @include pseudo-ba {
      background-color: rgba(140, 20, 20, 1);
    }
    &::before {
      top: -3vh;
      left: 2vh;
      right: 2vh;
      height: 3vh;

      background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.3) 5%,
        rgba(255, 255, 255, 0.1) 11%,
        rgba(0, 0, 0, 0) 30%,
        rgba(0, 0, 0, 0.05) 80%,
        rgba(0, 0, 0, 0.6) 97%,
        rgba(0, 0, 0, 0.4) 100%
      );
      box-shadow: inset 0.1vh 0.2vh 0 rgba(255, 255, 255, 0.2),
        inset 0 -0.1vh 0 rgba(0, 0, 0, 0.25), 0 0.2vh 3vh rgba(0, 0, 0, 0.25);
    }
    &::after {
      left: 0;
      right: 0;
      bottom: 0;
      height: 4vh;
      background-image: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.05),
        rgba(255, 255, 255, 0.2)
      );
      box-shadow: inset 0.2vh 0.2vh 0.5vh rgba(255, 255, 255, 0.25);
    }
    .label {
      @include abs-tl(3vh, 3vh);
      @include rect(24vh, 7vh, #999, 0.5vh);
      background-image: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0) 80%
      );
      box-shadow: 0.1vh 0.1vh 0.2vh rgba(0, 0, 0, 0.3);
      &::before {
        content: "";
        position: absolute;
        inset: 0.8vh;
        border: 1vh solid #020202;
        border-radius: 0.5vh;
      }
    }
    .button {
      @include abs-br(4vh, 2vh);
      @include circle(14vh, rgba(140, 20, 20, 1));
      background-image: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 0.1)
      );
      box-shadow: inset 0.2vh 0.2vh 0.5vh rgba(255, 255, 255, 0.5);
      border-radius: 50% 50% 0 0;
      &::before {
        content: "";
        @include abs-tl(3.5vh, 3.5vh);
        @include circle(7vh, #999);
        box-shadow: inset 0.1vh 0.5vh 0 rgba(255, 255, 255, 0.5),
          inset 0vh -0.5vh 0 rgba(0, 0, 0, 0.5),
          inset 1vh 0.5vh 2vh rgba(0, 0, 0, 0.25);
      }
    }
  }
}

@for $i from 1 through $num-rings {
  $starting-left: 15;
  $mid-left: random() * 30 + 5;
  $ending-left: random() * 30 + 5;

  @keyframes ring-#{$i} {
    0% {
      $bottom: 4;
      $left: 15;
      $rotate-x: -80;
      $rotate: rotateX(#{$rotate-x}deg);

      bottom: #{$bottom}vh;
      left: #{$left}vh;
      transform: $rotate;
    }
    20% {
      $bottom: random() * 15 + 45;
      $left: random() * 20 + 5;
      $rotate-x: 470;
      $rotate: rotateX(#{$rotate-x}deg);

      bottom: #{$bottom}vh;
      left: #{$left}vh;
      transform: $rotate;
    }
    35% {
      $bottom: random() * 5 + 45;
      $left: random() * 10 - 5 + $mid-left;
      $rotate-x: random() * 100 + 50;
      $rotate: rotateX(#{$rotate-x}deg);

      bottom: #{$bottom}vh;
      left: #{$left}vh;
      transform: $rotate;
    }

    // This is a winner
    @if ($ending-left > 17 and $ending-left < 22) {
      85% {
        $bottom: 31;
        $left: random() * 5 - 2.5 + 18.5;
        $rotate-x: random() * 50 + 50;
        $rotate: rotateX(#{$rotate-x}deg);

        bottom: #{$bottom}vh;
        left: #{$left}vh;
        transform: $rotate;
      }
      90% {
        $left: 18.5;
        $bottom: 29;
        $rotate-x: 70;
        $rotate: rotateX(#{$rotate-x}deg);

        bottom: #{$bottom}vh;
        left: #{$left}vh;
        transform: $rotate;
        mask-position: 0 -3vh, 0 0;
      }
      91% {
        $left: 18.5;
        $bottom: 28.5;
        $rotate-x: 80;
        $rotate: rotateX(#{$rotate-x}deg);

        bottom: #{$bottom}vh;
        left: #{$left}vh;
        transform: $rotate;
        mask-position: 0 0vh, 0 5vh;
      }
      100% {
        $left: 18.5;
        $bottom: 21.5;
        $rotate-x: 70;
        $rotate: rotateX(#{$rotate-x}deg);

        bottom: #{$bottom}vh;
        left: #{$left}vh;
        transform: $rotate;
        mask-position: 0 0vh, 0 5vh;
      }
    }

    // Not a winner
    @if ($ending-left < 17 or $ending-left > 22) {
      60% {
        $bottom: 30;
        $left: random() * 10 - 5 + $mid-left;
        $rotate-x: random() * 300 + 100;
        $rotate: rotateX(#{$rotate-x}deg);

        bottom: #{$bottom}vh;
        left: #{$left}vh;
        transform: $rotate;
      }
      90% {
        $bottom: 8;
        $left: random() * 10 - 5 + $ending-left;
        $rotate-x: random() * 50 + 50;
        $rotate: rotateX(#{$rotate-x}deg);

        bottom: #{$bottom}vh;
        left: #{$left}vh;
        transform: $rotate;
      }
      100% {
        $left: random() * 8 + 12;
        $bottom: 5;
        $rotate-x: random() * 20 + 65;
        $rotate: rotateX(#{$rotate-x}deg);

        bottom: #{$bottom}vh;
        left: #{$left}vh;
        transform: $rotate;
      }
    }
  }
}
